<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django + Vuetify 3 (CDN)</title>

    <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />

    <!-- Material Design Icons -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Vuetify 3 -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script>

    <style>
        /* 抽屉菜单项悬停效果 */
        .v-list-item {
            transition: background-color 0.2s ease;
        }

        .v-list-item:hover {
            background-color: #e3f2fd !important;

        }

        /* 可选：更明显的效果 */
        .v-list-item.active:hover {
            background-color: rgba(25, 118, 210, 0.2) !important;
        }

        .v-card-actions .v-btn {
            margin-top: 4px;
        }

        /* 子菜单项更小的字体 */
        .v-list-item.pl-8 .v-list-item-title {
            font-size: 0.95rem;
        }

        /* 悬停背景色 */
        .v-list-item:hover {
            background-color: rgba(67, 160, 71, 0.1) !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- Vuetify 组件将在这里渲染 -->
        <v-app id="inspire">
            <v-navigation-drawer class="pt-4" color="grey-lighten-3" model-value rail>
                <v-avatar v-for="n in 6" :key="n" :color="`grey-${n === 1 ? 'darken' : 'lighten'}-1`"
                    :size="n === 1 ? 36 : 20" cla
                    
                    
                    
                    ss="d-block text-center mx-auto mb-9"></v-avatar>
            </v-navigation-drawer>

            <v-main>

            </v-main>

        </v-app>
    </div>

    <script>
        const { createApp } = Vue;

        // 定义自定义主题
        const lightTheme = {
            dark: false,
            colors: {
                background: '#FFFFFF',
                surface: '#FFFFFF',
                primary: '#43A047',     /* 绿色主色 */
                secondary: '#5C6BC0',
                accent: '#8D6E63',
                error: '#EF5350',
                info: '#29B6F6',
                success: '#66BB6A',
                warning: '#FFB74D',
            }
        };

        const darkTheme = {
            dark: true,
            colors: {
                background: '#121212',
                surface: '#212121',
                primary: '#4DB6AC',
                secondary: '#7E57C2',
                accent: '#BDBDBD',
                error: '#EF9A9A',
                info: '#4FC3F7',
                success: '#81C784',
                warning: '#FFD54F',
            }
        };

        // 创建 Vuetify 实例
        const vuetify = Vuetify.createVuetify({
            theme: {
                defaultTheme: 'lightTheme',
                themes: {
                    lightTheme,
                    darkTheme
                }
            }
        });

        // 创建 Vue 应用
        const app = createApp({
            data: () => ({
                drawer: false,
                theme: 'lightTheme',
                menuItems: [
                    { title: '业务处理1', href: '/app1/index', icon: 'mdi-cog' },
                    { title: '业务处理2', href: '/app2/index', icon: 'mdi-chart-bar' },
                    { title: '业务处理3', href: '/app3/index', icon: 'mdi-package-variant' },
                ]
            }),
            methods: {
                toggleTheme() {
                    this.theme = this.theme === 'lightTheme' ? 'darkTheme' : 'lightTheme';
                    this.$vuetify.theme.name = this.theme;
                },
                submitFile(step) {
                    const input = this.$refs[`fileInput${step}`]?.$el?.querySelector('input[type="file"]');
                    const file = input?.files[0];

                    if (!file) {
                        alert(`业务处理${step}：请先选择文件`);
                        return;
                    }

                    const formData = new FormData();
                    formData.append('file', file);

                    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value || '{{ csrf_token }}';

                    fetch(`/app${step}/upload/`, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRFToken': csrfToken
                        },
                        credentials: 'same-origin'
                    })
                        .then(response => {
                            if (response.ok) {
                                alert(`业务处理${step}：文件上传成功！`);
                                input.value = '';  // ✅ 清空文件栏
                            } else {
                                return response.text().then(text => {
                                    alert(`上传失败: ${text.slice(0, 200)}`);
                                });
                            }
                        })
                        .catch(error => {
                            alert(`网络错误: ${error.message}`);
                        });
                },
                clearFile(step) {
                    const input = this.$refs[`fileInput${step}`]?.$el?.querySelector('input[type="file"]');
                    if (input) {
                        input.value = '';
                        alert(`业务处理${step}：文件已清空`);
                    }
                }
            },
        });

        // 使用 Vuetify 插件
        app.use(vuetify);

        // 挂载
        app.mount('#app');
    </script>

</body>

</html>